<template>
	<div class="flex bg-white w-full h-full">
		<UserInfoItem class="pt-4 pb-4 overflow-hidden h-full" style="width: 13%; border-right: #eee 1px solid;"></UserInfoItem>
		<div style="width: 87%;">
			<UserInfoData class="p-4" v-show="UserInfoDataShow"></UserInfoData>
			<UserInfoUpdate v-if="UserInfoUpdateShow"></UserInfoUpdate>
			<SalaryRecord v-if="SalaryRecordShow"></SalaryRecord>
		</div>
	</div>
</template>

<script>
	import UserInfoItem from './UserInfoItem'
	import UserInfoData from './UserInfoData'
	import UserInfoUpdate from './UserInfoUpdate'
	import SalaryRecord from './SalaryRecord'
	
	export default {
		name: 'UserInfo',
		components: {
			UserInfoItem,
			UserInfoData,
			UserInfoUpdate,
			SalaryRecord
		},
		data(){
			return {
				UserInfoDataShow: true,
				UserInfoUpdateShow: false,
				SalaryRecordShow: false
			}
		},
		created() {
			// 回到详情主页
			this.$bus.on('goUserDataHome', () =>{
				this.UserInfoDataShow = true
				this.UserInfoUpdateShow = false
				this.SalaryRecordShow = false
			})
			// 打开用户信息编辑
			this.$bus.on('UserInfoUpdate', () => {
				this.UserInfoDataShow = false
				this.UserInfoUpdateShow = true
			})
			// 打开工资记录
			this.$bus.on('SalaryRecord', () => {
				this.UserInfoDataShow = false
				this.SalaryRecordShow = true
			})
		}
	}
</script>